<template>
  <el-select v-model="pickerValue" size="small"
             @change="changeCity">
    <el-option
        v-for="item in cityList"
        :key="item.code"
        :label="item.name"
        :value="item.code"
        class="custom-select-option"
    />
  </el-select>
</template>

<script setup>
import {defineProps, defineEmits, ref, watch, computed} from 'vue';

const props = defineProps({
  cityValue: {
    type: String,
    required: true
  },
});

const cityList = ref([
  {name: '辽宁省', code: '210000'},
  {name: '沈阳市', code: '210100'},
  {name: '大连市', code: '210200'},
  {name: '鞍山市', code: '210300'},
  {name: '抚顺市', code: '210400'},
  {name: '本溪市', code: '210500'},
  {name: '丹东市', code: '210600'},
  {name: '锦州市', code: '210700'},
  {name: '营口市', code: '210800'},
  {name: '阜新市', code: '210900'},
  {name: '辽阳市', code: '211000'},
  {name: '盘锦市', code: '211100'},
  {name: '铁岭市', code: '211200'},
  {name: '朝阳市', code: '211300'},
  {name: '葫芦岛市', code: '211400'},
])

const emit = defineEmits(['update:cityValue']);
const pickerValue = ref(props.cityValue);
const changeCity = (value) => {
  emit('update:cityValue', value);
};
</script>
<style scoped lang="less">
/deep/ .el-select__wrapper {
  background: #204485;

  .el-select__selected-item {
    color: white;
  }
}

.custom-select-option {
  color: #ffffff;
  background: #1C5BCC;
}

.custom-select-option.is-selected {
  color: #00e0ff;
}

.custom-select-option:hover {
  background: #368CF2;
}
</style>